<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--
  Created by IntelliJ IDEA.
  User: xf
  Date: 2021-04-08
  Time: 09:04
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <meta charset="utf-8">
    <title>教练展示</title>
    <%
        String str = request.getContextPath();
        String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +
                str + "/";
//    request.setAttribute("path", path);
    %>
    <c:set var="pd" value="<%=path%>" scope="session"></c:set>
    <link rel="stylesheet" href="${pd}/statics/cocha/css/zerostyle.css">
    <link rel="stylesheet" href="${pd}/statics/cocha/css/zerogrid.css">
    <link rel="stylesheet" href="${pd}/statics/cocha/css/style.css">
    <link rel="stylesheet" href="${pd}/statics/cocha/css/responsiveslides.css">

    <!-- Custom Fonts -->
    <link href="${pd}/statics/cocha/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="${pd}/statics/cocha/js/script.js"></script>
    <script src="${pd}/statics/cocha/js/responsiveslides.min.js"></script>
    <link href="${pd}/statics/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="statics/js/jquery.js"></script>
    <script src="statics/js/echarts.min.js"></script>
    <script>
        function showOne() {
            $.post("piephysical.action", function (result) {
                console.log(result);
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '',
                    },
                    tooltip: {},
                    legend: {
                        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator: [
                            {name: '力量', max: 100},
                            {name: '忍耐力', max: 100},
                            {name: '敏感性', max: 100},
                            {name: '协调性', max: 100},
                            {name: '爆发性', max: 100}
                        ]
                    },
                    series: [{
                        name: '',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data: [
                            {
                                value: result,
                                name: '指标'
                            }
                        ]
                    }]
                };
                option && myChart.setOption(option);
            });
        }
    </script>
</head>
<body>
<div class="wrap-body">

    <section id="container">
        <div class="wrap-container">

            <section class="content-box box-1">
                <div class="zerogrid">

                    <div class="header">
                        <h2 class="heading">
                            <span>教练荣誉\奖项</span>
                        </h2>
                    </div>


                    <div class="row"><!--Start Box-->
                        <c:forEach var="coa" items="${list}">
                            <div class="col-1-3">
                                <div class="wrap-col item">
                                    <div class="zoom-container">
                                        <img src="${pd}/statics/cocha/images/${coa.coImg}.jpg"/>
                                    </div>
                                    <div class="item-content">
                                        <span>${coa.title}</span>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>

                    </div>

                </div>
            </section>

            <section class="content-box box-3"><!--Start Box-->
                <div class="zerogrid">
                    <div class="row">
                        <div class="header">
                            <h2 class="heading">
                                <span>技能授课 & 综合能力</span>
                            </h2>
                        </div>
                        <div class="post" style="background-color: white;">
                            <div class="col-1-2">
                                <img src="${pd}/statics/cocha/images/23.jpg"/>
                            </div>
                            <div class="col-1-2" style="margin-top: 70px;">
                                <div class="wrapper" style="margin-left: 80px">
                                    <b class="btn btn-info" style="font-size: 38px;">技能 / 授课</b>
                                    <p></p>

                                </div>
                            </div>
                            <div class="post" style="background-color: white">
                                <div class="col-1-2 f-right">
                                    <div id="main" style="float: left;width:100%;height: 337px; float: left;margin-left: 80px;margin-top: 30px" />
                                </div>
                            </div>
                            <div class="col-1-2" style="text-align: center;margin-top: 135px;">
                                <button class="btn btn-info" onclick="showOne()"><b style="font-size: 38px;">体能展示</b></button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>
    <!--////////////////////////////////////Footer-->
    <footer>
        <div style="background-color: black;">
            <div>
                <div style="height: 200px;padding-top: 26px">
                    <h3 style="color: #FFFFFF">关于我们</h3>
                    <span style="color: #FFFFFF">联系方式 / 83145678 </span></br>
                    <span style="color: #FFFFFF">Email / info@domain.com  </span></br>
                    <span style="color: #FFFFFF">Studio / Moonshine St. 14/05 Xi'an City </span></br>
                    <span><b style="color: #FFFFFF;font-weight: bolder">Copyright &copy; 2020.Company name All rights reserved.</b></span>
                </div>
            </div>
        </div>
    </footer>

    <!-- Google Map -->
    <script>
        $('.maps').click(function () {
            $('.maps iframe').css("pointer-events", "auto");
        });

        $(".maps").mouseleave(function () {
            $('.maps iframe').css("pointer-events", "none");
        });
    </script>
</div>

</body>
</html>
